<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico"
        mce_href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico" type="image/x-icon" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>欢迎使用小程序云托管</title>

    <script src="/js/jquery-1.11.1.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans",
                "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
                "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
        }

        .title-logo {
            width: 459px;
            height: 87px;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @media screen and (min-width: 1200px) {
            body .container {
                margin-top: 160px;
                margin-bottom: 272px;
            }
        }

        @media screen and (max-width: 1919px) {
            body .container {
                margin-top: 76px;
                margin-bottom: 128px;
            }
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 320px;
        }

        .title-text {
            width: 320px;
            height: 48px;
            text-align: center;
            margin-top: 16px;
            font-size: 32px;
            opacity: 0.9;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 48px;
        }

        .list-text {
            width: 320px;
            height: 16px;
            text-align: center;
            margin-top: 16px;
            font-size: 18px;
            opacity: 0.9;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 10px;
        }

        .foot-text {
            width: 320px;
            height: 16px;
            text-align: center;
            margin-top: 16px;
            font-size: 24px;
            opacity: 0.9;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 10px;
        }

        .button_test {
            width: 160px;
            height: 30px;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            background-color: #4c9af7;
            border: none;
            border-radius: 4px;
            margin-top: 4px;
            cursor: pointer;
        }

        .button_add {
            text-align: center;
            font-size: 10px;
            color: #ffffff;
            background-color: #4c9af7;
            border: none;
            border-radius: 4px;
            margin-top: 4px;
            cursor: pointer;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #dddddd;
            border-radius: 2px;
            margin-top: 4px;
        }

        table td {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }

        table th {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            background-color: #83c2fd;
            color: #ffffff;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .id_col {
            width: 20px;
            display: none;
        }

        .service_col {
            width: 20px;
        }

        .record_col {
            width: 100px;
        }

        .dbError {
            color: crimson;
        }

        .redisError {
            color: crimson;
        }
    </style>
</head>

<body>
    <script>
        function getDateTime() {
            let now = new Date();
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth(); //得到月份
            let date = now.getDate(); //得到日期
            let day = now.getDay(); //得到周几
            let hour = now.getHours(); //得到小时
            let minu = now.getMinutes(); //得到分钟
            let sec = now.getSeconds(); //得到秒
            month = month + 1;
            if (month < 10) month = "0" + month;
            if (date < 10) date = "0" + date;
            if (hour < 10) hour = "0" + hour;
            if (minu < 10) minu = "0" + minu;
            if (sec < 10) sec = "0" + sec;
            var time = "";
            time =
                year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
            return time;
        }

        function testService(flag) {
            $.ajax("/service" + getParams(false), {
                method: "GET",
                contentType: "application/json; charset=utf-8",
            }).done(function (res) {
                if (flag) {
                    if ($("#serviceTab").css("display") === "none") {
                        $("#serviceTab").css("display", "block");
                    } else {
                        $("#serviceTab").css("display", "none");
                    }
                } else {
                    $("#serviceTab").css("display", "block");
                }
                let str = "服务接口：/service&返回结果：";
                str = str + res + "&当前时间：" + getDateTime();
                let data = str.split("&");
                let ss = "";
                $("#serviceTab .serviceData").remove();
                for (var i = 0; i < data.length; i++) {
                    let strArr = data[i].split("：");
                    //拼接表格的行和列
                    ss =
                        "<tr class='serviceData'><td class='service_col'>" +
                        strArr[0] +
                        "</td><td class='record_col'>" +
                        strArr[1] +
                        "</td></tr>";
                    //追加到table中
                    $("#serviceTab").append(ss);
                }
            });
        }

        function testAddRecord() {
            const record = $("#record").val();
            if (record === null || record === "") {
                testDatabase(false);
                return;
            }
            $.ajax("/database/addRecord" + getParams(false), {
                method: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    record: $("#record").val(),
                }),
            }).done(function (res) {
                if (res.success === false || res.data === null) {
                    const linkHtml=`<a href="https://github.com/AlipayCloudrun/alipaycloudrun-demo-for-express#4%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5" 
                        target="_blank" style="font-size:8px;color:red">报错了,点击查看解决方案</a>`;
                    const output = document.getElementById('dbError');
                    output.innerHTML=linkHtml;
                }
                testDatabase(false);
            });
        }

        function testDatabase(flag) {
            $.ajax("/database/getList" + getParams(false), {
                method: "GET",
            }).done(function (res) {
                let tmp = JSON.parse(res);
                if (tmp.success === true && tmp.data != null) {
                    if (flag) {
                        if ($("#tab").css("display") === "none") {
                            $("#tab").css("display", "block");
                        } else {
                            $("#tab").css("display", "none");
                        }
                    } else {
                        $("#tab").css("display", "block");
                    }
                    var data = tmp.data;
                    var str = ""; //定义用于拼接的字符串
                    $("#tab .appendData").remove();
                    for (var i = 0; i < data.length; i++) {
                        //拼接表格的行和列
                        str =
                            "<tr class='appendData'><td class='id_col'>" +
                            data[i].id +
                            "</td><td class='record_col'>" +
                            data[i].record +
                            "</td><td>" +
                            data[i].gmt_create +
                            "</td><td>" +
                            "<a onclick='testDeleteRecord(" +
                            data[i].id +
                            ")' href='javascript:void(0);'>删除</a></td></tr>";
                        //追加到table中
                        $("#tab").append(str);
                    }
                } else {
                    const linkHtml=`<a href="https://github.com/AlipayCloudrun/alipaycloudrun-demo-for-express#4%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5" 
                        target="_blank" style="font-size:8px;color:red">报错了,点击查看解决方案</a>`;
                    const output = document.getElementById('dbError');
                    output.innerHTML=linkHtml;
                }
            });
        }

        function testDeleteRecord(id) {
            $.ajax({
                type: "get", // 以get方式发起请求
                contentType: "application/json; charset=utf-8",
                url: "/database/deleteRecord?id=" + id + getParams(true),
                success(res) {
                    if (res.success === false || res.data === null) {
                        const linkHtml=`<a href="https://github.com/AlipayCloudrun/alipaycloudrun-demo-for-express#4%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5" 
                            target="_blank" style="font-size:8px;color:red">报错了,点击查看解决方案</a>`;
                        const output = document.getElementById('dbError');
                        output.innerHTML=linkHtml;
                    }
                    testDatabase(false);
                },
            });
        }

        function testShowRedis() {
            if (testRedisSet(true)) {
                if ($("#tabRedis").css("display") === "none") {
                    $("#tabRedis").css("display", "block");
                } else {
                    $("#tabRedis").css("display", "none");
                }
            }
        }

        function testRedisSet(flag) {
            let result = true;
            let key = 'test';
            let value = 'test';
            if (!flag) {
                key = $("#key").val();
                value = $("#value").val();
            }
            $.ajax({
                type: "get", // 以get方式发起请求
                contentType: "application/json; charset=utf-8",
                url: "/redis/set?key=" + key + "&value=" + value + getParams(true),
                async: false,
                success(res) {
                    if (res == "error") {
                        const linkHtml=`<a href="https://github.com/AlipayCloudrun/alipaycloudrun-demo-for-express#5redis%E7%BC%93%E5%AD%98" 
                            target="_blank" style="font-size:8px;color:red">报错了,点击查看解决方案</a>`;
                        const output = document.getElementById('redisError');
                        output.innerHTML=linkHtml;
                        $("#value").val("赋值失败");
                        result = false;
                    } else {
                        if (!flag) {
                            $("#value").val("赋值成功");
                        }
                    }
                },
            });
            return result;
        }

        function testRedisGet() {
            const key = $("#key").val();
            $.ajax({
                type: "get", // 以get方式发起请求
                contentType: "application/json; charset=utf-8",
                url: "/redis/get?key=" + key + getParams(true),
                success(res) {
                    if (res === "error") {
                        const linkHtml=`<a href="https://github.com/AlipayCloudrun/alipaycloudrun-demo-for-express#5redis%E7%BC%93%E5%AD%98" 
                            target="_blank" style="font-size:8px;color:red">报错了,点击查看解决方案</a>`;
                        const output = document.getElementById('redisError');
                        output.innerHTML=linkHtml;
                        $("#value").val("取值失败");
                    } else {
                        $("#value").val(res);
                    }
                },
            });
        }
        function getParams(type) {
            let params = window.location.search;
            if (params == "" || params.indexOf("?") != 0) {
                return "";
            }
            if (type) {
                params = params.replace("?", "&");
            }
            return params;
        }
    </script>

    <div class="container">
        <div class="title">
            <img class="title-logo" src="/img/logo.png" />
            <div style="display: inline; margin-bottom: 48px" class="title-text">
                欢迎使用小程序云托管
            </div>
        </div>

        <button type="button" onclick="testService(true)" class="button_test">
            测试服务
        </button>
        <div style="width: 100%;display: flex;justify-content: center;">
            <table id="serviceTab" style="display: none;width: 340px;">
                <tr>
                    <td colspan="2">
                        <div>
                            <button type="button" onclick="testService(false)" class="button_add">
                                重新查询
                            </button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th style="width: 160px">服务指标</th>
                    <th style="width: 180px">指标信息</th>
                </tr>
            </table>
        </div>
        <br />

        <button type="button" onclick="testDatabase(true)" class="button_test">
            测试数据库访问
        </button>
        <output id="dbError" class="dbError"></output>
        <div style="width: 100%;display: flex;justify-content: center;">
            <table id="tab" style="display: none;width: 340px;">
                <tr>
                    <td colspan="4">
                        <div>
                            <input type="text" placeholder="请输入..." id="record" />
                            <button type="button" onclick="testAddRecord()" class="button_add">
                                插入一条记录
                            </button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th hidden="hidden" style="width: 20px">id</th>
                    <th style="width: 100px">记录信息</th>
                    <th style="width: 180px">创建时间</th>
                    <th style="width: 40px">操作</th>
                </tr>
            </table>
        </div>
        <br />
        <button type="button" onclick="testShowRedis()" class="button_test">
            测试缓存服务
        </button>
        <output id="redisError" class="redisError"></output>
        <div style="width: 100%;display: flex;justify-content: center;">
            <table id="tabRedis" style="display: none; width: 340px;">
                <tr>
                    <th style="width: 100px">key</th>
                    <th style="width: 180px">value</th>
                    <th style="width: 60px">操作</th>
                </tr>
                <tr>
                    <td>
                        <input type="text" placeholder="请输入key..." id="key" width="100px"
                            style="width: 80px !important" />
                    </td>
                    <td>
                        <input type="text" placeholder="value..." id="value" width="180px"
                            style="width: 80px !important" />
                    </td>
                    <td>
                        <div style="display: flex;">
                            <a onclick='testRedisSet(false)' href='javascript:void(0);'
                                style="width: 40px !important">赋值</a>
                            <a onclick='testRedisGet()' href='javascript:void(0);' style="width: 40px !important">取值</a>

                        </div>

                    </td>
                </tr>
            </table>
        </div>


        <br /><br /><br />
        <span class="foot-text">快速入手</span>
        <hr style="display: block; width: 320px" />
        <a href="https://opendocs.alipay.com/pre-open/04n0zd" target="_blank">
            开发者文档
        </a>
    </div>
</body>

</html>